/**
 * Created by Administrator on 2016/11/9.
 */
import React from 'react'
import {fetchPost} from '../../../../../utils/request'

import {Card, Icon} from 'antd'
import Styles from '../Index.less'
import styles from '../../../photoCheck/common/detail/Index.less'

class Risk extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      processNode: props.processNode,
      id: props.id,
      loading: true,
      userId: props.userId,
      message: '',
      timer: null,
      aadhaarCheckScore: null,
      panStatus: '',
      riskCreditInformation: [],
      manualReviewReason: [],
      cibilReportLink: null,
      equifaxReportLink: null,
      riskResult: null,
    }
  }

  // 初始化方法 会在组件挂载后自动调用
  componentDidMount() {
    // this.getData()
    this.getAadhaarAndPanCheckData()
    // this.getRiskCheckData()
  }

  /**
   * 当props发生变化时执行，初始化render时不执行，
   * 在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，
   * 旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用
   * @param props
   */
  componentWillReceiveProps(props) {
    if (props.id != this.state.id || props.userId != this.state.userId) {
      this.setState({
        id: props.id,
        userId: props.userId,
        loading: true,
      }, () => {
        this.getAadhaarAndPanCheckData()
        // this.getData()
        // this.getRiskCheckData()
      })
    }
  }

  /**
   * 在组件卸载前自动调用
   */
  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }

  // 请求数据
  getData() {
    if (this.state.id != null) {
      fetchPost('/risk/riskpage', {
        tradeNo: this.state.userId
      }).then(json => {
        if (json.code === 0) {
          if (json.data != null) {
            this.setState({
              riskCreditInformation: json.data.riskCreditInformation,
              manualReviewReason: json.data.manualReviewReason,
              cibilReportLink: json.data.cibilReportLink,
              equifaxReportLink: json.data.equifaxReportLink
            })
          }
        } else {
          this.setState({
            message: json.msg
          })
        }
      })
    }
  }

  /*
   * 获取aadhaar和pan校验结果api
   * */
  getAadhaarAndPanCheckData() {
    if (this.state.userId != null) {
      fetchPost(`/user/${this.state.id.userCode}/aadhaar_pan/status`, {}).then(json => {
        if (json.code === 0) {
          if (json.data != null) {
            this.setState({
              /*aadhaarCheckScore: json.data.aadhaarScore,*/
              panStatus: json.data.panStatus,
              loading: false
            })
          }
        } else {
          this.setState({
            loading: false,
            message: json.msg
          })
        }
      })
    }
  }

  /**
   * 获取风控原始结果
   */
  getRiskCheckData() {
    if (this.state.id != null) {
      fetchPost(`/risk/result/get`, {
        tradeNo: this.state.id.tradeNo
      }).then(json => {
        if (json.code === 0) {
          if (json.data != null) {
            this.setState({
              riskResult: json.data.riskResult,
            })
          }
        } else {
          this.setState({
            riskResult: '',
          })
        }
      })
    }
  }

  createManualReviewReasonContent() {
    let data = this.state.manualReviewReason;
    let content = []
    if (data != null && data.length > 0) {
      data.map((item) => {
        content.push(
          <div key={item.ruleName} className={Styles.informationContent}>
            <span style={{width: '20%'}}><b>priority:</b>{item.decisionPriority}&nbsp;</span>
            <span style={{width: '20%'}}><b>name:</b>{item.ruleName}&nbsp;</span>
            <span style={{width: '60%', paddingLeft: 5}}><b>result:</b>{item.decisonResult}&nbsp;</span>
          </div>
        )
      })
    }
    return content
  }

  createCreditInformationContent() {
    let data = this.state.riskCreditInformation
    let cibilReportLink = this.state.cibilReportLink
    let equifaxReportLink = this.state.equifaxReportLink
    let content = []
    if (data != null && data.length > 0) {
      data.map((item) => {
        let value = item.value
        if (item.key == 'Clbil score') {
          if (value == null) {
            value = <a href='javascript:'>--</a>
          } else {
            value =
              <a href={cibilReportLink == null ? 'javascript:' : cibilReportLink} target="_blank">{item.value}</a>
          }
        } else if (item.key == 'Equifax') {
          if (value == null) {
            value = <a href='javascript:'>--</a>
          } else {
            value =
              <a href={equifaxReportLink == null ? 'javascript:' : equifaxReportLink} target="_blank">{item.value}</a>
          }
        } else {
          if (value == null) {
            value = '--'
          }
        }
        content.push(
          <div key={item.key} className={Styles.informationContent}>

            <span style={{width: '20%'}}>{item.key}</span>
            :
            <span style={{width: '80%', paddingLeft: 5}}>{value}</span>
          </div>)
      })
    }
    return content
  }

  message() {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon
          type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  render() {
    if (!this.state.id) {
      return (
        <Card title='Credit information' noHovering>
          <span className='no-data'><Icon type='frown-o'/>No data</span>
        </Card>
      )
    }

    return (
      <div>
        {/*<div className={styles.detailModule}>*/}
        {/*  <Card title='System Result'>*/}
        {/*    <span>{`System results: ${this.state.riskResult}`}</span>*/}
        {/*  </Card>*/}
        {/*</div>*/}
        {/*<div className={styles.detailModule}>*/}
        {/*  {*/}
        {/*    this.state.processNode == 3 ? null :*/}
        {/*      <Card title='Manual Review Reason' extra={this.message()} bodyStyle={{padding: '10px'}} noHovering>*/}
        {/*        {this.createManualReviewReasonContent()}*/}
        {/*      </Card>*/}
        {/*  }*/}
        {/*  <Card title='Credit Information' extra={this.message()} bodyStyle={{padding: '10px'}} noHovering>*/}
        {/*    {this.createCreditInformationContent()}*/}
        {/*  </Card>*/}
        {/*</div>*/}
        <div className={styles.detailModule}>
          {/*<Spin spinning={this.state.loading}>*/}
          <Card title='PAN Check Status' extra={this.message()} bodyStyle={{padding: '10px', maxHeight: 210}}
                noHovering>
            {/*<div className={Styles.informationContent}>
             <span style={{width: '20%'}}>Aadhaar_score</span>
             :
             <span style={{width: '80%', paddingLeft: 5}}>{this.state.aadhaarCheckScore}</span>
             </div>*/}
            <div className={Styles.informationContent}>
              <span style={{width: '20%'}}>PAN</span>
              :
              <span style={{width: '80%', paddingLeft: 5}}>{this.state.panStatus}</span>
            </div>
          </Card>
          {/*</Spin>*/}
        </div>
      </div>
    )
  }
}

export default Risk
